<template>
  <div>
    <el-container>
      <el-header>
        <p>查询</p>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="搜索：">
            <el-input v-model="formInline.orderId" placeholder="请输入要查询的订单号" icon="el-icon-search"></el-input>
          </el-form-item>
          <el-form-item label="下单方式：">
            <el-select v-model="formInline.orderWay" placeholder="请选择下单方式">
              <el-option label="小程序" value="xiaochengxu"></el-option>
              <el-option label="门店" value="mendian"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <!-- 表格 -->
        <el-table :data="tableData" stripe style="width: 100%" :cell-style="{border:'1px solid #DCDCDC'}" :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
          <el-table-column prop="id" label="ID" width="50" align='center'></el-table-column>
          <el-table-column prop="orderId" label="订单编号" width="120" align='center'></el-table-column>
          <el-table-column prop="userName" label="用户名" width="100" align='center'></el-table-column>
          <el-table-column prop="orderWay" label="下单方式" width="100" align='center'></el-table-column>
          <el-table-column prop="mealTime" label="用餐时间" width="120" align='center'></el-table-column>
          <el-table-column prop="category" label="用户类别" width="120" align='center'></el-table-column>
          <el-table-column prop="money" label="消费金额" width="80" align='center'></el-table-column>
          <el-table-column prop="payWay" label="支付方式" width="120" align='center'></el-table-column>
          <el-table-column prop="tableNum" label="就餐桌号" width="80" align='center'></el-table-column>
          <el-table-column prop="payType" label="状态" width="100" align='center'></el-table-column>
          <el-table-column fixed="right" label="操作" align='center'>
            <template slot-scope="scope">
              <el-button @click="onCheck(scope.row)" type="text" size="small">查看订单</el-button>
              <el-button @click="onDel(scope.row)" type="text" size="small">删除</el-button>
              <el-button @click="onTran(scope.row)" type="text" size="small">反位</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
        :page-sizes="[5,10,15,20,25,30]" :page-size="count" layout="total,sizes,prev, pager, next, jumper" :total="totalData.length">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>
<style scoped lang='less'>
* {
  box-sizing: border-box;
}
.el-header {
  border: 1px solid #dcdcdc;
  height: 100px !important;
  padding: 15px 30px;
  .el-form {
    margin-left: 50px;
    .el-form-item {
      margin-right: 60px;
      .el-input,
      .el-select {
        width: 260px;
      }
      .el-button {
        width: 150px;
      }
    }
  }
}
.el-main {
  margin-top: 15px;
  border: 1px solid #dcdcdc;
  padding: 18px 10px 20px 10px;
}
.el-table {
  margin-bottom: 50px;
}
.el-pagination {
  text-align: center;
}
</style>
<script>
export default {
  data() {
    return {
      formInline: {
        tableId: '',
        orderWay: ''
      },
      // 订单总数据
      totalData:[],
      // 中间数组
      centerData:[],
      // 页码
      page:1,
      // 条数
      count:5
      // tableData: [
      //   {
      //     id: '10',
      //     orderId: '12345678',
      //     userName: 'Megan',
      //     orderWay: '小程序',
      //     mealTime: '2022-3-8',
      //     category: '普通用户',
      //     money: '57.00',
      //     payWay: '微信支付',
      //     tableNum: '05',
      //     payType: '已付款'
      //   },
      //   {
      //     id: '10',
      //     orderId: '12345678',
      //     userName: 'Megan',
      //     orderWay: '小程序',
      //     mealTime: '2022-3-8',
      //     category: '普通用户',
      //     money: '57.00',
      //     payWay: '微信支付',
      //     tableNum: '05',
      //     payType: '已付款'
      //   },
      //   {
      //     id: '10',
      //     orderId: '12345678',
      //     userName: 'Megan',
      //     orderWay: '小程序',
      //     mealTime: '2022-3-8',
      //     category: '普通用户',
      //     money: '57.00',
      //     payWay: '微信支付',
      //     tableNum: '05',
      //     payType: '已付款'
      //   },
      //   {
      //     id: '10',
      //     orderId: '12345678',
      //     userName: 'Megan',
      //     orderWay: '小程序',
      //     mealTime: '2022-3-8',
      //     category: '普通用户',
      //     money: '57.00',
      //     payWay: '微信支付',
      //     tableNum: '05',
      //     payType: '已付款'
      //   },
      //   {
      //     id: '10',
      //     orderId: '12345678',
      //     userName: 'Megan',
      //     orderWay: '小程序',
      //     mealTime: '2022-3-8',
      //     category: '普通用户',
      //     money: '57.00',
      //     payWay: '微信支付',
      //     tableNum: '05',
      //     payType: '已付款'
      //   },
      //   {
      //     id: '10',
      //     orderId: '12345678',
      //     userName: 'Megan',
      //     orderWay: '小程序',
      //     mealTime: '2022-3-8',
      //     category: '普通用户',
      //     money: '57.00',
      //     payWay: '微信支付',
      //     tableNum: '05',
      //     payType: '已付款'
      //   },
      //   {
      //     id: '10',
      //     orderId: '12345678',
      //     userName: 'Megan',
      //     orderWay: '小程序',
      //     mealTime: '2022-3-8',
      //     category: '普通用户',
      //     money: '57.00',
      //     payWay: '微信支付',
      //     tableNum: '05',
      //     payType: '已付款'
      //   }
      // ]
    }
  },
  methods: {
    // 查询
    onSubmit() {

    },
    // 查看详情
    onCheck() {

    },
    // 删除
    onDel() {

    },
    // 反位
    onTran() { 

    },
    // 每页多少条数据
    handleSizeChange(count) {
        this.count=count
    },
    // 分页
    handleCurrentChange(page) {
        this.page=page
    },
  }
}
</script>